// App组件被称为主组件，也可以称期为应用组件
import React,{Component} from "react";
import PropTypes from "prop-types";// 可以控制接收的属性类型
// 1
export class App extends React.Component{
    static propTypes = {
        userName:PropTypes.string,// 类型必须是字符串
        age:PropTypes.number.isRequired,// 类型必须是数字，且不能为undefined
        // array object func
    }
    static defaultProps = {
        age:100
    }
    render(){
        return (
            <div>
                <h3>App</h3>
                <p>userName:{this.props.userName}</p>
                <p>age:{this.props.age}</p>
            </div>
        )
    }
}
// 2
export class App2 extends Component{
    render(){
        return (
            <div>App2</div>
        )
    }
}
// 3- 先定义再导出
class App3 extends Component{
    render(){
        return (
            <div>App3</div>
        )
    }
}
const App4 = class extends Component{
    render(){
        return (
            <div>App4</div>
        )
    }
}
export {
    App3,
    App4
}

// 4- export default
// class App5 extends Component{
//     render(){
//         return (
//             <div>App5</div>
//         )
//     }
// }
// export default App5;

// export default class extends Component{
//     render(){
//         return (
//             <div>App5</div>
//         )
//     }
// }

export default class App5 extends Component{
    render(){
        return (
            <div>App5</div>
        )
    }
}

